<template>
  <div class="h-full w-full relative">

    <!-- svg container -->
    <SvgContainer>
      <template #default="{width,height}">
        <svg :width="width" :height="height">
          <!-- header-->
          <g stroke-width="2">
            <!--  title border  -->
            <path :d="`
              M${width*0.4},${headerHeight*0.6}
              L${width*0.4},${headerHeight}
              H${width-60}
              V${headerHeight*0.5}
              L${width-60-20},${headerHeight*0.2}
              H${width*0.4+20} Z`" fill="none"  stroke="#3e7ca6"
            />
            <!--  title-line left  -->
            <g >
              <circle :cx="width*0.3" :cy="headerHeight*0.7" r="5" fill="none"   stroke="#fff" />
              <path :d="`
                M${width*0.3+2.5},${headerHeight*0.7-2}
                L${width*0.33},${headerHeight*0.4}
                L${width*0.4+10},${headerHeight*0.4}`" fill="none"  stroke="#fff" stroke-width="2"  />
            </g>

            <!--  title-line right  -->
            <g >
              <circle :cx="width-40" :cy="headerHeight*0.4" r="5" fill="none" stroke="#fff" />
              <path :d="`
                M${width-40-4},${headerHeight*0.35}
                L${width-40-4-25},0
                L${width-40-4-68},0`" fill="none" stroke="#fff" stroke-width="2"  />
            </g>
          </g>

          <!-- content -->
          <g stroke-width="2">
            <!-- content-border -->
            <g>
              <!-- 定义模糊滤镜 -->
              <filter id="blur_filter">
                <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
              </filter>
              <path :d="`
                M10,${headerHeight+10}
                V${height*0.5}
                L0,${height*0.5+10}
                V${height-20-10}
                L10,${height-20}
                H${width*0.5-10}
                L${width*0.5+10},${height}
                H${width-20-10}
                L${width-10},${height-10}
                V${height*0.5}
                L${width},${height*0.5-10}
                V${headerHeight+10+20}
                L${width-20},${headerHeight+10}
                H${width*0.22}
                L${width*0.22-10},${headerHeight}
                H${10+10} Z`" stroke="#3e7ca6" stroke-width="3" fill="rgba(0,0,0,0.2)" filter="url(#blur_filter)" />

              <!-- bottom-line -->
              <path :d="`M10,${height-5}
                H${width*0.4}`" stroke="#fff" />
              <circle r="5" :cx="width*0.4+5" :cy="height-5" fill="none" stroke="#fff" />
            </g>
          </g>
        </svg>
      </template>
    </SvgContainer>

    <!-- content container -->
    <div class="h-full w-full relative">
      <slot></slot>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SvgContainer from '@/components/Common/SvgContainer/index.vue'

const headerHeight = ref(50)
</script>
